<template>
  <div>
    <div @click="showPic">11</div>
    <!-- //海报 -->
    <div
    class="showpic"
      style="
        position: fixed;
        z-index: 1;
        min-height: 100vh;
        width: 100vw;
        top: 0;
        left: 0;
        background-color: white;
        opacity: 0.55;
      "
      @click="showPic"
      v-show="diaIsShow"
    ></div>
    <div
      style="
        position: fixed;
        top: 25vh;
        height: calc(80vw * 1.5);
        width: 80vw;
        margin-left: 10vw;
        padding-top: 10px;
        border-radius: 25px;
        border: 2px solid #73ad21;
        background-color: white;
        text-align: center;
        z-index: 2;
        box-shadow: 10px 10px 5px #888888;
      "
      v-show="diaIsShow"
    >
      长按图片保存海报
      <div
        ref="imageTofile"
        :style="{
          height: 'calc(70vw*1.5)',
          width: '70vw',
          overflow: 'hidden',
          'margin-left': '5vw',
        }"
        v-show="isShow"
      >
        <img
          style="
            height: calc(70vw * 1.5);
            width: 70vw;
            position: absolute;
            left: 5vw;
          "
          :src="backgroundBase64"
        />
        <img
          style="
            height: calc(70vw * 0.25);
            width: calc(70vw * 0.25);
            margin: calc(80vw * 0.875) -10vw;
            position: absolute;
            z-index: 999;
          "
          :src="QRcodeBase64"
        />
      </div>

      <img
        :style="{
          height: 'calc(70vw*1.5)',
          width: '70vw',
        }"
        :src="outUrl"
        v-show="!isShow"
      />
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import html2canvas from "html2canvas";

export default {
  data() {
    return {
      // 生成图片
      backgroundBase64: "",
      QRcodeBase64: "",
      outUrl: "",
      isShow: true,
      diaIsShow: false,
    };
  },
  mounted() {
    this.getImage();
  },
  methods: {
    getImage() {
      let query = { userId: 1, page: "jifen" };
      return request({
        url: "/generator/poster/front/poster",
        method: "get",
        params: query,
      }).then((response) => {
        this.backgroundBase64 =
          "data:image/png;base64," + response.poster.backPic;
        this.QRcodeBase64 = "data:image/png;base64," + response.qrcode;
        // setTimeout(()=>this.toImage(), 100);
      });
    },
    showPic() {
      this.diaIsShow = !this.diaIsShow;
      this.backgroundBase64;
      this.QRcodeBase64;
      if (this.diaIsShow) {
        console.log("分享积分");
        this.getNummo();
        setTimeout(() => this.toImage(), 100);
      } else {
        this.isShow = true;
      }
    },
    getNummo() {
      request({
        url: "/generator/poster/front/posterPoint",
        method: "get",
      }).then((response) => {
        // console.log('response',response);
      });
    },
    toImage() {
      // TODO开始生成
      // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
      html2canvas(this.$refs.imageTofile, {
        backgroundColor: null,
      }).then((canvas) => {
        // TODO结束生成
        let url = canvas.toDataURL("image/png");
        this.outUrl = url;
        // console.log(this.outUrl);
        if (this.outUrl) {
          this.isShow = false;
        }
      });
    },
  },
};
</script>

<style>

</style>